<template>
  <div>
    <head-tab />
    <div class="app-container">
      <div class="form-container">
        <p>登陆</p>
        <el-divider></el-divider>
        <el-tabs v-model="activeName"
                 type="card">
          <el-tab-pane label="账号登陆"
                       name="accountLogin">
            <el-form :model="accountForm"
                     label-width="100px"
                     :rules="rules"
                     ref="accountForm">
              <el-form-item label="账号："
                            prop="username">
                <el-input v-model="accountForm.username"
                          placeholder="请输入账号"
                          style="width:250px" />
              </el-form-item>
              <el-form-item label="密码："
                            prop="password">
                <el-input v-model="accountForm.password"
                          style="width:250px"
                          placeholder="请输入密码"
                          type="password" />
              </el-form-item>
            </el-form>
          </el-tab-pane>
        </el-tabs>
        <div>
          <el-row type="flex"
                  justify="center">
            <el-col :span="12">
              <el-button type="success"
                         :loading="loading"
                         @click="submit(activeName)">提交</el-button>
            </el-col>
          </el-row>

        </div>
      </div>
    </div>
  </div>
</template>

<script>
import HeadTab from "./components/headTab.vue"
import { login } from '@/api/auth'
export default {
  name: 'login',
  components: { HeadTab },
  data() {
    return {
      loading: false,
      activeName: 'accountLogin',
      accountForm: {},
      phoneForm: {},
      disabled: false,
      countDown: 0,
      btnTxt: '获取验证码',
      rules: {
        username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
      }
    }
  },
  created() {
    console.log(process.env.VUE_APP_BASE_API)
  },
  methods: {
    submit(activeName) {
      if (activeName === 'accountLogin') {
        this.loading = true
        this.$refs['accountForm'].validate(valid => {
          if (valid) {
            login(this.accountForm).then(res => {
              if (res.publicData.retInfo.retType === 0) {
                this.$notify.success(res.publicData.retInfo.retMsg)
                window.sessionStorage.setItem('uuid', res.uuid)
                window.sessionStorage.setItem('role', res.role_message.permission)
                window.sessionStorage.setItem('user', JSON.stringify(res.user))
                if (res.role_message.permission === 'handler') {
                  this.$router.push('/mobile')
                } else {
                  this.$router.push('/')
                }

                // window.sessionStorage.setItem('uuid',res.uuid)
              } else {
                this.$notify.warning(res.publicData.retInfo.retMsg)
              }
              this.loading = false
            }).catch(e => {
              this.loading = false
            })
          } else {
            this.loading = false
            return false
          }
        })

      }

    },
    sendVerify() {
      try {
        this.$refs.phoneForm.validate(valid => {
          if (valid) {
            // sendVerify(this.reset.phone).then(res => {
            //   if (res.data.uuid) {
            //     // 设置按钮禁用
            //     this.disabled = true
            //     // 设置倒计时为30秒
            //     this.countDown = 30
            //     // 设置定时器
            //     this.timer()
            //     this.reset.uuid = res.data.uuid
            //     this.$notify.success(res.data.msg)
            //   } else {
            //     this.$notify.error(res.data.msg)
            //   }
            // }).catch(e => {
            //   console.log(e)
            // })
          } else {
            return false
          }
        })
      } catch (e) {
        console.log(e)
      }
    },
    timer() {
      // 如果计时器 > 0 ，则秒数递减，并文案替换
      if (this.countDown > 0) {
        this.countDown--
        this.btnTxt = this.countDown + "s后重新获取"
        // 循环递归函数
        setTimeout(this.timer, 1000)
      } else {
        this.countDown = 0
        this.btnTxt = '获取验证码'
        this.disabled = false
      }
    }
  },
}
</script>

<style lang="scss" scoped>
.form-container {
  margin-top: 2%;
  padding: 3%;
  width: 80%;
}
</style>
